<script setup lang="ts">
    import { ref, reactive, onMounted } from 'vue';
    import type { LinkItem } from '@/services/type';
    import { api } from '@/services/api';
    
    // 友情链接列表信息
    var liskData = reactive<LinkItem[]>([]);
    // 初始化正在加载中
    const loading = ref(true);

    onMounted(async () => {
        // 获取友情链接列表信息
        const response = await api.common.getLinkList()
        // 如果状态返回失败
        if(response.code !== 0) return; 
        // 结果赋值
        liskData.push(...response.data);
        // 加载结束
        loading.value = false;
    });
</script>
<template>
    <div class="sideTab">
        <div class="sideTab-title">
            <span class="name">友情链接</span>
            <span class="applyLinks">
                <a href="/links">
                    申请友链
                    <!-- <svg-icon iconClass='add'></svg-icon> -->
                </a>
            </span>
        </div>
        <div class="link-box">
            <ul class="link-list">
                <li class="link-item" v-for="(item, index) in liskData" :key="index">
                    <a :href="item.url" :target="item.target" :title="item.describe">
                        <img :src="item.icon"/>
                        {{item.title}}
                    </a>
                </li>
            </ul>
        </div>
    </div>
</template>
<!-- 引入样式文件 -->
<style lang="less" src="./style.less" scoped />